<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
  <p>
  http://www.apache.org/licenses/LICENSE-2.0
  <p>
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<section class="content--row">
    <div class="alert alert-danger">
        <strong>通知!</strong> wikift 现在支持搜索功能啦!!! 快速搜索入口请点击
        <a [routerLink]="['/article/search']">体验搜索功能</a>
    </div>
    <div class="row">
        <!-- 文章内容 -->
        <div class="col-md-9">
            <tabset>
                <div [ngBusy]="loadArticleBusy"></div>
                <tab heading="最新文章" (select)="loadArticleOrderByCreateTime()">
                </tab>
                <tab heading="最热文章" (select)="loadArticleOrderByView()">
                </tab>
                <tab heading="推荐文章" (select)="loadArticleOrderByFabulou()">
                </tab>
                <tab heading="我的文章" *ngIf="userInfo" (select)="loadMyArticle()">
                </tab>
            </tabset>
            <div *ngFor="let article of articles" class="card">
                <!-- 文章用户信息 -->
                <div class="card-header border-b-1 px-4 py-3">
                    <div class="card-block d-flex py-3">
                        <div class="mr-auto">
                            <h5>
                                <a [routerLink]="['/article/info', article.id]">{{ article?.title }}</a>
                                <span *ngIf="(currentDay| date:'yyyyMMdd') === (article.createTime | date:'yyyyMMdd')" class="badge badge-pill badge-danger">新</span>
                                <span *ngIf="article.articleType.id === 1" class="badge badge-pill badge-success">原</span>
                                <span *ngIf="article.articleType.id === 2" class="badge badge-pill badge-info">转</span>
                            </h5>
                        </div>
                        <!-- 文章PV -->
                        <div class="ml-4">
                            <button type="button" class="btn btn-success btn-sm" tooltip="该文章共有{{article.viewCount}}次访问" container="body" placement="bottom">
                                <span>
                                    <i class="zmdi zmdi-eye zmdi-hc-fw"></i>
                                    <span>{{article.viewCount}}</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div *ngIf="article.user" class="media">
                        <div class="media-body">
                            <div class="user-sm">
                                <div class="article__user__info">
                                    <img class="article__user__img" src="{{ article.user.avatar }}" alt="{{ article.user.username }}">
                                    <div class="article__user__name">
                                        <a [routerLink]="['/account', article.user.username, 'info']">{{ article.user.username }}</a> - {{ article.createTime | date:'yyyy年MM月dd日HH:mm:ss'
                                        }} 发布
                                    </div>
                                    <!-- 文章标签 -->
                                    <div class="card-block ml-10">
                                        <span *ngFor="let articleTag of article.articleTags" class="badge badge-gray ml-2">
                                            <a [routerLink]="'/article/search'" [queryParams]="{'tag': articleTag.title}">{{articleTag.title}}</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 文章内容信息 -->
                <div class="card-body border-b-1">
                    <p class="mb-0">
                        <wikift-editor id="editormd-{{article.id}}" markdown="{{article.content| slice: 0:100}}" [preview]="'true'"></wikift-editor>
                    </p>
                </div>
                <!-- 文章附属信息 -->
                <div class="card-footer d-flex px-4 py-3">
                    <div class="mr-auto">
                        <button type="button" class="btn btn-secondary btn-sm disabled" tooltip="该文章共有{{article.fabulouCount}}位用户赞" container="body"
                            placement="bottom">
                            <span>
                                <i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i>
                                <span>{{article.fabulouCount}}</span>
                            </span>
                        </button>
                    </div>
                    <div class="ml-4">
                        <button type="button" class="btn btn-secondary btn-sm disabled" tooltip="该文章共有{{article.commentsCount}}条评论" container="body"
                            placement="bottom">
                            <span>
                                <i class="zmdi zmdi-comments zmdi-hc-fw"></i>
                                <span>{{article.commentsCount}}</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="mr-center">
                <pagination *ngIf="articles?.length && page" [(ngModel)]="currentPage" totalItems="{{page.totalElements}}" maxSize="{{page.size}}"
                    (pageChanged)="pageChanged($event)" [boundaryLinks]="true">
                </pagination>
            </div>
        </div>
        <!-- 其他功能 -->
        <div class="col-md-3">
            <!-- 用户排行榜 -->
            <div class="card">
                <div class="card-header border-b-1 mr-center">
                    <div class="card-block">
                        <h2 class="card-title">活跃用户</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div class="messages__sidebar">
                        <div class="listview listview--hover">
                            <a *ngFor="let user of activeUsers" class="listview__item" [routerLink]="['/account', user.username, 'info']">
                                <img src="{{ user.avatar }}" alt="{{ user.username }}" class="listview__img">
                                <div class="listview__content">
                                    <div class="listview__heading">{{ user.username }}</div>
                                    <p>{{ user.signature }}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 标签排行榜 -->
            <div class="card">
                <div class="card-header border-b-1 mr-center">
                    <div class="card-block">
                        <h2 class="card-title">活跃标签</h2>
                    </div>
                </div>
                <div class="card-body" style="margin-top: 20px;">
                    <div echarts [options]="wordCloudChart" class="comments-counter-chart"></div>
                </div>
            </div>
        </div>
    </div>
</section>